<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="row clearfix">
                        <div class="col-md-3 column">
                        </div>
                        <div class="col-md-6 column">
                            <h1 class="text-center ">
                                记账事项设置
                            </h1>
                            <h3 class="text-right text-success">
                                欢迎您:XXX
                                <#--<@shiro.principal property="name" />-->
                            </h3>


                            <div class="form-group">
                                <div class="col-sm-4">
                                    <button type="button" class="btn btn-default btn-block"
                                            value="" style="background-color: cornflowerblue;font-size: large"
                                    >筛选查询</button>
                                </div>
                            </div>

                            <form role="form" action="/item/list" method="post">
                                <div class="col-sm-offset-11 col-sm-0">
                                    <#--<button type="submit" class="btn btn-lg btn-success"-->
                                    <#-->查询</button>-->
                                </div>

                                <div class="col-md-9 column" >
                                    <div class="form-group">
                                        <label for="content">事项名称</label>
                                        <input type="text" class="form-control"
                                               id="content" name="content" value="${content!}"/>
                                    </div>
                                </div>
                                <div class="col-md-3 column" style="margin-top: 25px">
                                    <button type="submit" class="btn btn-default btn-success"
                                    >查询</button>
                                </div>

                            </form>

                            <div class="form-group" style="margin-top: 100px">
                                <div class="col-sm-4">
                                    <button type="button" class="btn btn-default btn-block"
                                            value="" style="background-color: cornflowerblue;font-size: large"
                                    >数据列表</button>
                                </div>
                            </div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>事项名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <#--                    c:forEach items='${pageInfo.list}'  var='trip'-->
                                <#list pageInfo.list as item>
                                    <tr class="info" style="width: 300px">
                                        <td>${item.content}</td>
                                        <td style="width: 200px">
                                            <button type="button" class="btn btn-info"
                                                    onclick="location.href='/item/edit-ui?id=${item.id}'">编辑</button>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <button type="button" class="btn btn-default btn-danger"
                                                    onclick="deleteOne(${item.id},this)">删除</button>
                                        </td>
                                    </tr>
                                </#list>

                                </tbody>
                            </table>
                            <ul class="pagination" style="float: right">


                                <#if pageInfo.hasPreviousPage >
                                    <li>
                                        <a href="javascript:;" onclick="location.href='/item/list?index=1'">首页</a>
                                    </li>

                                    <li>
                                        <a href="javascript:;" onclick="location.href='/item/list?index=${pageInfo.prePage}'">上一页</a>
                                    </li>
                                </#if>


                                <#if pageInfo.pageNum lt pageInfo.pages >
                                    <li>
                                        <a href="javascript:;" onclick="location.href='/item/list?index=${pageInfo.nextPage}'">下一页</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" onclick="location.href='/item/list?index=${pageInfo.pages}'">尾页</a>
                                    </li>
                                </#if>
                            </ul>
                        </div>
                        <div class="col-md-3 column">
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <script src="/static/js/jquery-1.8.0.min.js" ></script>
        <script>

            // 删除事项信息
            function deleteOne(id,obj){
                if (confirm("您确定删除该事项信息吗？")) {
                    //发送ajax请求到后台,并传递全部的参数.
                    $.getJSON(
                        "/item/delete?id=" + id,
                        null,
                        function (result) {
                            if (result.code == 0) {
                                location.href='/item/list';
                            }else {
                                alert(result.msg)
                            }
                        }
                    );
                }
            }

        </script>
    </body>
</html>